/** @type {HTMLCanvasElement} */
const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
const CANVAS_WIDTH = canvas.width = 700;
const CANVAS_HEIGHT = canvas.height = 500;
let explosions = [];//所有的爆炸效果。

function Explosion(x,y){
    this.spiritWidth = 200;
    this.spiritHeight = 179;
    this.frame = 0;
    this.width = this.spiritWidth * 0.5;
    this.height = this.spiritHeight * 0.5;
    this.x = x-this.width/2;
    this.y = y-this.height/2;
    this.image = new Image();
    this.image.src = "imgs/boom.png";
    this.timer = 0;
    this.sound = new Audio("sounds/boom.wav");
    
    this.update = function(){
        if(this.frame == 0){
            this.sound.play();
        }
       
        this.timer++;
        if(this.timer % 20 == 0){
            this.frame++;
        }
    }

    this.draw = function(){
        ctx.drawImage(this.image,
            this.spiritWidth*this.frame,0,this.spiritWidth,this.spiritHeight,this.x,this.y,this.width,this.height)
    }
}

// class Explosion{
//     constructor(x,y){
     
//         this.spiritWidth = 200;
//         this.spiritHeight = 179;
//         this.frame = 0;
//         this.width = this.spiritWidth * 0.5;
//         this.height = this.spiritHeight * 0.5;
//         this.x = x-this.width/2;
//         this.y = y-this.height/2;
//         this.image = new Image();
//         this.image.src = "imgs/boom.png";
//         this.timer = 0;
//         this.sound = new Audio("sounds/boom.wav");
//     }
//     update(){
//         if(this.frame == 0){
//             this.sound.play();
//         }
       
//         this.timer++;
//         if(this.timer % 20 == 0){
//             this.frame++;
//         }
        
//     }
//     draw(){
//         ctx.drawImage(this.image,
//             this.spiritWidth*this.frame,0,this.spiritWidth,this.spiritHeight,this.x,this.y,this.width,this.height)
//     }
// }

canvas.addEventListener("click",function(e){
    let expl = new Explosion(e.offsetX,e.offsetY);
    explosions.push(expl);
})

function animate(){
    ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
    for(let i = 0;i<explosions.length;i++){
        explosions[i].update();
        explosions[i].draw();
        if(explosions[i].frame > 5){
            explosions.splice(i,1);
            i--;
        }
    }
    requestAnimationFrame(animate);
}

animate();

